<style lang="scss">
  .category {
    .el-header {
      margin-top: 10px;
    }
    .el-main {
      padding-top: 0 !important;
    }
    .el-table {
      height: calc(100vh - 180px);
    }
  }
</style>

<template>
  <el-container class="category">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">类别名称:
            <el-input
              v-model="pageParam.condition.name"
              size="small"
              :clearable="true"
              placeholder="请输入类别名称"
              style="width: 160px;"
            ></el-input>
          </div>
        </div>
        <div class="search-btn">
          <el-button size="small" icon="el-icon-search" plain @click="doSearch" :loading="loadingTable">查询</el-button>
          <el-button type="success" size="small" icon="el-icon-circle-plus-outline" plain @click="addFn">添加</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list" stripe :height="tableHeight">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="120px"></el-table-column>
        <el-table-column prop="name" label="类别名称" align="center"></el-table-column>
        <el-table-column prop="dqzt" label="当前状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dqzt=== 0" style="color: #F04134">已停用</span>
            <span v-else style="color: #67C23A">启用中</span>
          </template>
        </el-table-column>
        <el-table-column prop="lastTime" label="维护时间" align="center" :formatter="formatDate"></el-table-column>
        <el-table-column prop="operations" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index"
              v-bind:class="'operations-'+item.handleMethod"
              type="text"
              size="mini"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>

    <!-- 已下发查看详情 -->
    <el-dialog title="添加类别" :visible.sync="dialogCategory"
      width="60%" :before-close="dialogCategoryCloseFn">
      <el-form :model="formItemData" :rules="formRules" ref="formItemData" label-width="200px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="formItemData.name"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import $ from 'jquery'

  export default {
    data () {
      return {
        // 用户信息
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: {

        },
        // 表格数据查询条数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
          condition: {
            name: ''
          }
        },
        // 加载
        loadingTable: false,
        // 添加弹框
        dialogCategory: false,
        fullScreen: true,
        // 添加表单
        formItemData: {
          name: ''
        },
        formRules: {

        }
      }
    },
    methods: {
      // 查询方法
      doSearch () {
        this.loadingTable = true
        this.getDeptCatePage()
      },
      // 获取督办处室分页列表
      getDeptCatePage () {
        const _this = this
        _this.$axios.post(_this.$api.category.page, _this.pageParam)
          .then(function (rs) {
            if (rs) {
              _this.loadingTable = false
              _this.tableItem = rs
            }
          })
      },
      // 分页
      handleSizeChange: function (size) {
        this.pageParam.pageSize = size
        this.getDeptCatePage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.pageParam.pageNum = currentPage
        this.getDeptCatePage()
      },
      // 日期格式化
      formatDate: function (row, column) {
        const _this = this
        var date = row.lastTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'able':
            this.ableFn(row)
            break
          case 'stop':
            this.stopFn(row)
            break
        }
      },
      // 添加类别
      addFn () {
        this.dialogCategory = true
      },
      // 关闭
      dialogCategoryCloseFn () {
        this.dialogCategory = false
      },
      // 启用方法
      ableFn (item) {
        const _this = this
        _this.$confirm('此操作将会启用该处室，是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.$axios
              .post(_this.$api.dept.able, {
                bmid: item.bmid,
                dqzt: 1
              })
              .then(function (rs) {
                if (rs) {
                  _this.$message({
                    message: '操作成功!',
                    showClose: true,
                    type: 'success'
                  })
                  _this.getDeptPage()
                }
              })
          })
          .catch(() => {})
      }
    },
    created: function () {
      // this.getDeptCatePage()
    }
  }
</script>
